
import { Button, Card, Flex, SwipeAction, Tag } from "@/components/base";
import { Typography } from "@/components/typography";
import Icon from "@ant-design/icons";
import I002 from '../../icons/I002.svg?react';
import { toCurrency } from "@/utils/funs";

const { Text } = Typography;

/** 购买服务 */
export function Services() {
    return (
        <Card style={{ width: '100%' }}>
            <Flex justify="space-between">
                <Text size={16} strong style={{ display: 'block', marginBottom: '16px' }}>
                    <Icon component={I002} style={{ marginRight: 6, color: 'var(--adm-color-primary)' }} />
                    购买服务
                </Text>
                <Button size="small">增加</Button>
            </Flex>
            <Flex vertical gap={16}>
                <ServiceCard />
                <ServiceCard />
            </Flex>
            <Flex justify='space-between' style={{ marginTop: 16 }}>
                <Text size={12}>合计：{toCurrency(1000)}</Text>
                <Text size={12}>赠送积分：100</Text>
            </Flex>
        </Card>
    )
}

/** 服务卡片 */
function ServiceCard() {
    return (
        <SwipeAction
            style={{ width: '100%' }}
            rightActions={[
                { text: '修改', key: 'delete1', color: 'var(--adm-color-primary)' },
                { text: '删除', key: 'delete3', color: 'red' },
            ]}
        >
            <Flex vertical style={{ width: '100%' }}>
                <Flex align='center' gap={8} style={{ width: '100%' }}>
                    <Text strong>服务名称</Text>
                    <Tag round color='#bbb' fill='outline' style={{ color: '#000' }}>服务编号</Tag>
                </Flex>
                <Text size={12}>购买10次 | 使用9次</Text>
                <Text size={16} strong>{toCurrency(1000)}</Text>
                <Text>赠送积分: 100</Text>
            </Flex>
        </SwipeAction>
    )
}